<template>
<!--  关于页面-->
  <BackgroundPlate title="关 于" description="" color="#546e7a"></BackgroundPlate>
  <n-grid :cols="8" id="message">

    <n-gi style="min-height: 100vh" :offset="clientWidth>1075?1:0" :span="clientWidth>1075?6:8">
      <n-card :embedded="isdarkTheme" :bordered="!isdarkTheme">

        <n-thing>
          <template #avatar>
            <!-- 这个动画效果如何使用。
            请访问作者文档：https://github.com/antfu/vue-starport/blob/main/README.zh-Hans.md -->
            <Starport   port="my-id"  style="width: 100px;height: 100px;background: none" >
              <myImg ></myImg>
            </Starport>
          </template>
          <template #header>
            <n-text tag="div"> Dragons.G </n-text>
          </template>

          <template  #description>
            目前工作：全栈开发 <br>
            联系邮箱：111420824@139.com <br>
            所在城市：上海
          </template>
          <template #header-extra>
            <n-space>
              <!-- <n-popover  trigger="click">
                <template #trigger>
                  <n-button size="small" type="info" strong secondary>我的公众号</n-button>
                </template>
                <n-image width="100" src="" />
              </n-popover> -->
              <n-popover  trigger="click">
                <template #trigger>
                  <n-button size="small" type="success"  strong secondary>我的微信号</n-button>
                </template>
                <img width="100" src="../assets/imgs/weixin.png" />
              </n-popover>
            </n-space>
          </template>
        </n-thing>

      </n-card>
      <br>
      <n-card :embedded="isdarkTheme" :bordered="!isdarkTheme">
        <template #header>
          <n-h2 class="margin-bottom0" prefix="bar" type="success" >
            关于本站
          </n-h2>
        </template>
        <template #header-extra>
              <router-link to="/sponsor">

              <n-button strong secondary><n-icon :size="16"><HeartOutline></HeartOutline></n-icon> 赞赏 </n-button>
              </router-link>

        </template>
         <n-h5  class="margin-bottom-top"> 前端：<n-gradient-text type="error">Vue3、Vite、Ts、NaiveUI </n-gradient-text>&nbsp;&nbsp;后端：<n-gradient-text type="info">Java</n-gradient-text>&nbsp;&nbsp;数据库：<n-gradient-text type="info">MySQL</n-gradient-text></n-h5>
         <n-h5  class="margin-bottom-top"> 站内为记录个人NOTES</n-h5>
         <n-h5  class="margin-bottom-top"> 站内登陆后可发布文章</n-h5>
         <n-h5  class="margin-bottom-top"> 站内不兼容低版本IE等浏览器</n-h5>
         <n-h5  class="margin-bottom-top"> 站内发布文章如有侵权邮箱联系，<span style="color: #d93b3b" >火速删</span>，谢谢！</n-h5>
      </n-card>
      <br>
      <n-card :embedded="isdarkTheme" :bordered="!isdarkTheme">
        <template #header>
          <n-h2 class="margin-bottom0" prefix="bar" type="success" >其他说明</n-h2>
        </template>
        <n-card embedded :bordered="false" >
         <n-p>
          站内注册
          <n-a href="http://king.dragons.org.cn/" target="_blank"> dragons.cn </n-a> 
          均为游客，可访问文章     
          <span style="color: #d93b3b" >🧣更高权限请联系管理员</span>
        </n-p>
         </n-card>
      </n-card>
      <br>
      <n-card :embedded="isdarkTheme" :bordered="!isdarkTheme">
        <template #header>
          <n-h2 class="margin-bottom0" prefix="bar" type="success" >
            本站源码
          </n-h2>
        </template>
        <n-card embedded :bordered="false">
          源码：<n-a href="https://gitee.com/gwcc/dragons-v" target="_blank">dragonsV</n-a>。需要的可前往下载。<br>
          如果您觉得本站还不错，可以通过点击右上角的赞赏按钮来支持本站，🧣感谢您的支持！
        </n-card>
      </n-card>
    </n-gi>

  </n-grid>
</template>

<script setup lang="ts">
import BackgroundPlate from '../components/background/BackgroundPlate.vue'
import {HeartOutline} from '@vicons/ionicons5'
import {VaeStore} from "../store";
import { Starport } from "vue-starport";
import {storeToRefs} from "pinia";
import {inject} from "vue";
const store = VaeStore();
let {clientWidth,distanceToBottom,distanceToTop,isdarkTheme} = storeToRefs(store);
//滚动条回到原位
const scrollBy = inject<Function>('scrollBy');
scrollBy? scrollBy(0):''
</script>

<style scoped>

</style>
